html, body {
	position: relative;
	height: 100%;
}
body {
	background: #eee;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	color:#333;
}
*{
	box-sizing: border-box;
}
.obs{
	position: absolute;
}
#arr_up{
	width: .5rem;
	height: .5rem;
	position: absolute;
	bottom: -.2rem;
	left: 50%;
	margin-left: -.25rem;
	opacity: .8;
	z-index: 99;
	-webkit-animation: arr_up 1s infinite;
}
@-webkit-keyframes arr_up{
	to {
		-webkit-transform: translate3d(0, -1rem, 0);
		opacity: 0;
	}
	
}
.ani{
	display: block;
	-webkit-animation-fill-mode: both;
}
.swiper-container {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	background: #fff;
}
.banner-wrap{
	margin: .6rem 1rem;
	position: relative;
}
.banner-wrap-footer{
	position: absolute;
	left: 0;
	bottom: -.1rem;
	width: 1rem;
	height: .12rem;
	background: #e94f81;
}
.banner-text{
	position: absolute;
	width: 100%;
	padding: .1rem 0;
	background: #fff;
	bottom: .5rem;
	left: 0;
	text-align: center;
	font-size: .42rem;
}
.has-vm-line{
	position: relative;
}
/*居中线*/
.vm-line{
	display: block;
	position: absolute;
	top: 50%;
	height: .02rem;
	width: 20%;
	background: #333;
	z-index: 9;
	
}
.vm-line-left{
	left: 1%;
	animation: fadeInLeft .5s .5s;
}
.vm-line-right{
	right: 1%;
}
.s1-title{
	margin: 1rem 2rem;
	padding: .5rem;
	border: 1px solid #333;
	position: relative;
}
.c-block{
	display: block;
	position: absolute;
}
.s1 .c-block{
	width: .2rem;
	height: .32rem;
}
.cb-red{
	background: #e94f81;
}
.s1 .cb-red{
	top: 1rem;
    left: 1.04rem;
}
.cb-blue{
	background: #00BCD4;
}
.s1 .cb-blue{	
    top: .65rem;
    left: 2.25rem;
}
.cb-yellow{
	background: #FFEB3B;
}
.s1 .cb-yellow{
    top: 1.25rem;
    left: 3.6rem;
}
.cb-green{
	background: #8BC34A;
}
.s1 .cb-green{
    top: 1.1rem;
    left: 5.05rem;
}
.s1-info{
	padding: 0 1rem;
}
.s1 .info-wrap{
	display: flex;
	align-items: center;
}
.s1 .head-img{
	height: 3rem;
	width: 3rem;
	border-radius: 50%;
	border: 2px dashed #333;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .2rem;
	flex: none;
}
.s1 .head-img img{
	border-radius: 50%;
}
.s1 .info-text{
	margin-left: .3rem;
	font-size: .48rem;
	display: flex;
	flex-direction: column;
	/*justify-content: space-between;*/
	align-items: center;
}
.info-text li{
	white-space: nowrap;
}
.s1 .text-line{
	margin: .1rem 0;
}
.s1 .line1{
	display: flex;
	align-items: center;
	border-left: 4px solid #e94f81;
	padding-left: .3rem;
	margin-bottom: .4rem;
}
.s1 .line2 p{
	float: left;
	width: 50%;
	text-align: center;
	height: 1rem;
	margin: .1rem 0;
	padding: .1rem;
}
.s1 .line2 p span{
	font-size: .4rem;
	padding: .2rem .4rem;
	background: #888;
	color: #fff;
	border-radius: .1rem;
}
.s1-info .header{
	font-weight: bold;
	font-size: .56rem;
	text-align: center;
	margin: .6rem 0;
}
.s .banner-text{
	display: flex;
	justify-content: space-between;
	font-size: 0.32rem;
}
.s .banner-text span{
	padding: 0 .5rem;
}
.header-card{
	position: absolute;
	width: 3.4rem;
	height: 3.4rem;
	bottom: -1.5rem;
	left: 50%;
	margin-left: -1.7rem;
}
.header-card .content{
	height: 3rem;
	width: 3rem;
	position: relative;
	left: .2rem;
	top: .2rem;
	padding: .5rem 0;
	background: #333;
	border-radius: 50%;
	text-align: center;
	font-size: .6rem;
	color: #fff;
	line-height: 1rem;
	font-weight: bold;
}
.header-card .circle{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 4px dashed #666;
	border-radius: 50%;
	animation: rotate 6s infinite linear;
}
@-webkit-keyframes rotate{
	from{
		-webkit-transform: rotate(-360deg);
	}
}

.s-info{
	margin: 2.5rem 1.5rem 0;
	position: relative;
	transform: perspective(5000px);  
    -moz-transform: perspective(5000px);  
    -o-transform: perspective(5000px);  
    -webkit-transform: perspective(5000px);
}
.s-info .info-text{
	position: absolute;
	width: 100%;
	height: 8rem;
	padding: .7rem 1rem 1rem 1.5rem;
	font-size: .42rem;
	top: 0;
	left: 0;
	line-height: 1rem;
}
.text-dot{
	display: inline-block;
	height: 8px;
	width: 8px;
	background: #00BCD4;
	border-radius: 50%;
	vertical-align: middle;
	margin: 0 .1rem;
}
.s2 .cb-red{
	width: .3rem;
    height: .5rem;
    right: 1.8rem;
    top: 7rem;
}
.s2 .cb-yellow{
	width: 2rem;
    height: .3rem;
    right: 1rem;
    bottom: 0;
}
.s2 .cb-blue{
	width: .3rem;
    height: .3rem;
    right: 1rem;
    top: 8rem;
}
.s2 .cb-green{
	width: .3rem;
    height: 2rem;
    right: 1rem;
    top: 9rem;
}

.s3-info{
	width: 100%;
	height: 10rem;
	position: absolute;
	bottom: 0;
	display: flex;
	justify-content: space-around;
	align-items: flex-end
}
.s .footer-img{
	position: absolute;
	bottom: -10px;
	left: 0;
}
.line-item{
	position: relative;
	bottom: 0;
	min-width: 2.5rem;
	font-size: 0.38rem;
}
.line-grow{
	position: absolute;
	display: block;
	width: 2px;
	left: 50%;
	bottom: 0;
	background: #aaa;
}
.li-text{
	position: absolute;
	top: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: -webkit-radial-gradient(#e94f81, rgba(233, 79, 129,.5));
	text-align: center;
	text-align: center;
	font-weight: bold;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.li1{
	height: 8rem;
}
.lg1{
	height: 5.5rem;
}
.li2{
	height: 10rem;
}
.lg2{
	height: 7.5rem;
}
.li3{
	height: 7.5rem;
}
.lg3{
	height: 5rem;
}
strong{
	font-weight: bold;
}
@-webkit-keyframes linegrow{
	from{
		height: 0;
	}
}
.linegrow{
	animation-name: linegrow;
}
.bg-text{
	font-size: .6rem;
	font-weight: bold;
	position: absolute;
	bottom: 3rem;
	width: 100%;
	text-align: center;
	letter-spacing: 1em;
	color: #666;
	text-indent: 1em;
}
.s5-info{
	margin-top: 3rem;
}
.s5-line{
	display: flex;
	justify-content: space-around;
	align-items: center;
	text-align: center;
}
.s5-line > div{
	width: 2.6rem;
	height: 2.6rem;
	position: relative;
}
.s5l1 p{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	line-height: 2.6rem;
	font-size: .6rem;
	font-weight: bold;
}
@-webkit-keyframes roateCircle{
	from{
		opacity: 0;		
		-webkit-transform: rotate(-180deg) scale(.5);
	}
}
.roateCircle{
	-webkit-animation-name: roateCircle;
}
.s5l2{
	margin: 1rem 0;
}
.s5l2 p{
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: #aaa;
	color: #fff;
	line-height: 1.5rem;
	font-size: 0.36rem;
}
.s5 .bg-text{
	font-size: .4rem;
    bottom: .5rem;
    border-bottom: 1px solid #666;
    padding-bottom: .05rem;
}
.s5 .cb-red{
	width: .3rem;
    height: 1rem;
    left: 0;
    top: 6rem;
}
.s5 .cb-yellow{
	width: 2rem;
    height: .3rem;
    right: 1rem;
    bottom: 0;
}
.s5 .cb-blue{
	width: .3rem;
    height: .3rem;
    left: .5rem;
    bottom: 1rem;
}
.s5 .cb-green{
	width: .3rem;
    height: 2rem;
    right: 0;
    bottom: 10px;
}

#renderContainer{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
    /*background-image: url(../img/banner_1.jpg);*/
   background: #000;
    background-position: 50% 50%;
    background-size: cover;
	z-index: -1;
}